<template>
	<view class="detail uni-padding-wrap uni-common-mt">
		<view class="form form-a">
			<view class="form-group">
				<view class="form-item">
					<view class="form-item-header">
						标题:
					</view>
					<view class="form-item-body">
						{{ message.message_title }}
					</view>
				</view>
				<view class="form-item form-item-ver">
					<view class="form-item-header">
						内容:
					</view>
					<view class="form-item-body">
						{{ message.message_content }}
					</view>
				</view>
				<view class="form-item">
					<view class="form-item-header">
						时间:
					</view>
					<view class="form-item-body">
						{{ message.create_time }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { queryMessage, modifyUnReadStatus } from '@/api/configure.js';
import { deepClone ,mergeUrls, getUserInfo } from '@/util/util.js';
import { pathToBase64, base64ToPath } from '@/util/mmmm-image-tools/index.js';
import configUrl from '@/util/url.js';

export default {
	data() {
		return {
			messageId: '',
			message: {},
			isRead: false
		}
	},
	methods: {
		async changeMessageStatus() {
			let params = {
				messageId: this.messageId
			}
			
			let { data, code } = await modifyUnReadStatus(params);
			
			if ( code === 0 ) {
				this.isRead = true;
			}
		},
		async getMessage(){
			let params = {
				messageId: this.messageId
			}
			
			let { data, code } = await queryMessage(params);
			
			if(code === 0){
				this.message = deepClone(data);
				
				if (this.message.message_status == 0) {
					this.changeMessageStatus();
				}
			}
		},
		back() {
		    uni.navigateBack({  
		        delta: 1
		    });  
		}  
	},
	onLoad(option){
		this.messageId = option.message_id;
		this.getMessage();
	},
	onBackPress(options) {
		if (options.from === 'navigateBack') {  
			return false;  
		}  
		
		if( this.isRead == true ){
			uni.$emit('message.message.reset',{'messageId': this.messageId});
		}
		
		this.back();
		
		return true;  
	}
}
</script>

<style lang="scss">
	.form{}
	.form-a{
		color: #767676;
		.form-group{
			.form-item{
				padding: 6rpx 0rpx;
				margin-bottom: 8rpx;
				display: flex;
				.form-item-header{
					width: 70rpx;
					font-size: 28rpx;
					line-height: 120%;
				}
				
				.form-item-body{
					box-sizing: border-box;
					padding-left: 10rpx;
					width: calc(100% - 70rpx);
					font-size: 28rpx;
					line-height: 120%;
				}
				&.form-item-ver{
					flex-direction: column;
					.form-item-header{
						width: 100%;
						margin-bottom: 10rpx;
					}
					.form-item-body{
						width: 100%;
						padding: 20rpx;
						border-radius: 10rpx;
						line-height: 120%;
						background-color: #ececec;
					}
				}
			}
			.text-alert{
				color: #dd524d;
			}
		}
	}
</style>
